<template>
<div class="zh-browser-setting">
    <nav-header></nav-header>
    <p style="margin: 0 0 10px">网页标题：</p>
    <el-input style="width: 200px" v-model.trim="headtitle" placeholder="请输入网页标题"></el-input>
    <p style="margin: 30px 0 15px">网页Logo：</p>
    <el-upload ref="upload" list-type="picture-card" :auto-upload="false" :show-file-list="false" :action="uploadAction" :data="normData" :headers="headers" :on-change="imgPreview" :on-success="logoUpSuccess" :on-error="logoUpError">
        <div>
            <div v-show="!logoPicture">
                <i class="el-icon-upload"></i>
            </div>
            <div v-show="logoPicture" class="cover-box">
                <img :src="logoPicture" />

                <div class="uploader-close-box" v-show="logoPicture !== ''">
                    <label class="el-upload-list__item-status-label" @click.stop="videoRemove">
                        <transition name="el-fade-in-linear">
                            <i class="el-icon-upload-success el-icon-check"></i>
                        </transition>
                        <transition name="el-fade-in-linear">
                            <i class="el-icon-close"></i>
                        </transition>
                    </label>
                </div>
            </div>
        </div>
    </el-upload>
    <div class="img-tip"><span>*</span>请上传 ico 格式图片</div>
    <div style="margin-top: 90px">
        <el-button type="primary" plain @click="resetList">重置</el-button>
        <el-button type="primary" @click="saveList">保存</el-button>
    </div>

    <el-dialog title="图片设置" 
        :visible.sync="cropperViews"
        :before-close="clearFilet"
        width="1000px" 
        custom-class="croppering" 
        :close-on-click-modal="false">
        <div class="croppering">
            <div class="cropper">
                <vueCropper 
                    ref="cropper" 
                    :img="imgOption.img" 
                    :outputSize="imgOption.size" 
                    :outputType="imgOption.outputType" 
                    :info="true" :full="imgOption.full" 
                    :canMove="imgOption.canMove" 
                    :canMoveBox="imgOption.canMoveBox" 
                    :fixedBox="imgOption.fixedBox" 
                    :original="imgOption.original"
                    :autoCrop="imgOption.autoCrop" 
                    :autoCropWidth="imgOption.autoCropWidth" 
                    :autoCropHeight="imgOption.autoCropHeight" 
                    :centerBox="imgOption.centerBox" 
                    :high="imgOption.high" 
                    :infoTrue="imgOption.infoTrue" 
                    :enlarge="imgOption.enlarge">
                </vueCropper>
            </div>
            <div slot="footer" class="dialog-footer cropper_btn">
                <el-button @click="clearFilet()">取消</el-button>
                <el-button type="primary" @click="finish('base64')">确定</el-button>
            </div>
        </div>
    </el-dialog>
</div>
</template>
<script>
import {VueCropper} from 'vue-cropper';
import {dataURLtoFile} from './../../../tools/tool';

export default {
    components: {
        VueCropper,
    },
    data() {
        return {
            app_code: sessionStorage.getItem('CheckSchoolAppCode'),
            headtitle: '',
            logoPicture: '', // 显示图片预览
            refName: 'upload',
            cropperViews: false, // 是否显示图片裁剪的模态框
            retryTimes: 100, //文件最大重传次数
            logo_url: '', // 图片在服务器的地址
            uploadAction: this.BASE_URL + '/api/resource/res_upload',
            normData: {
                // company: 'BL',
                // device_name: 'TE-0600R',
                // sign: this.$g.access_token,
                // actioncode: 'post_upload',
            },
            headers: {
                Authorization: `Bearer ` + this.$g.access_token
            },
            imgOption: { // vue-cropper 参数配置
                img: '', // 裁剪图片的地址
                size: 1, // 裁剪生成图片的质量
                full: false, // 是否输出原图比例的截图
                outputType: 'png', //输出图片格式
                canMove: true, //能否拖动图片
                fixedBox: true, //截图框固定大小
                original: false, //否显示原始宽高
                canMoveBox: true, //能否拖动截图框
                autoCrop: true, //autoCrop 是否自动生成截图框
                // 只有自动截图开启 宽度高度才生效
                autoCropWidth: 48,
                autoCropHeight: 48,
                centerBox: false, //截图框是否限制在图片里
                high: false //是否根据dpr生成适合屏幕的高清图片
            },
        }
    },
    created() {
        this.getList();
        // this.getSchoolData();
    },
    methods: {
        getSchoolData() {
            let params = {
                app_code: this.app_code
            }
            let success = res => {
                this.headtitle = res.data.name
            }
            this.$ajax.get('api/newlevel/platform',  {params,func: {success}})
        },
        getList(val) {
            let success = (data => {
                this.headtitle = data.data.name;
                this.logoPicture = this.BASE_URL + data.data.path;
                this.logo_url = data.data.path;

                if (val == 'update') {
                    sessionStorage.setItem('siteTitle', this.headtitle);
                    sessionStorage.setItem('siteIcon', (this.BASE_URL + data.data.path));

                    document.title = this.headtitle;
                    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
                    link.type = 'image/x-icon';
                    link.rel = 'shortcut icon';
                    link.href = this.BASE_URL + data.data.path;
                    document.getElementsByTagName('head')[0].appendChild(link);
                }
            });
            let fail = (data => {
                this.$message.error(data.msg);
            })

            this.$ajax.get('api/setting/browser_set', {params: {},func: {success: success, fail: fail}})
        },
        /**
         * 重置浏览器设置
         */
        resetList() {
            this.headtitle = '';
            this.logoPicture = '';
            this.logo_url = '';
            this.getList();
        },
        saveList() {
            if (this.headtitle.trim() === '') {
                this.$message.error('请输入网页标题');
                return false;
            }
            if (this.logo_url === '') {
                this.$message.error('网页logo不能为空');
                return false;
            }

            let success = (data => {
                this.$message.success(data.msg);
                this.getList('update');
            });
            let params = {
                name: this.headtitle,
                path: this.logo_url
            }

            this.$ajax.post('api/setting/browser_set', params, {
                func: {
                    success: success
                }
            })
        },
        //清空上传控件列表的数据
        clearFilet() {
            this.logo_url = '';
            this.cropperViews = false;
            this.$refs[this.refName].uploadFiles = [];
        },
        videoRemove() {
            this.clearFilet();
            this.logoPicture = '';
        },
        imgPreview(file, fileList) {
            const isLt2M = file.size / 1024 / 1024 < 10;

            if (file.status === 'ready') {
                /*图片上传之前做校验，限制大小以及类型 */
                if (file.raw.type.toLocaleLowerCase() !== 'image/x-icon') {
                    this.$message.warning('只允许上传 ico 格式图片!');
                    this.$refs[this.refName].uploadFiles = [];

                    return false;
                } else if (!isLt2M) {
                    this.$message.warning('上传图片大小不能超过 10MB!');

                    return false;
                } else {
                    this.imgOption.img = window.URL.createObjectURL(file.raw);
                    this.cropperViews = true;
                }
            }
        },
        //图片裁剪后替换原图片
        finish(type) {
            if (type === 'blob') {
                this.$refs.cropper.getCropBlob((data) => {
                    this.cropperViews = false;
                })
            } else {
                this.$refs.cropper.getCropData((data) => {
                    let modelView = dataURLtoFile(data, this.$refs[this.refName].uploadFiles[this.$refs[this.refName].uploadFiles.length - 1].name);
                    modelView.uid = this.$refs[this.refName].uploadFiles[this.$refs[this.refName].uploadFiles.length - 1].uid;

                    this.$refs[this.refName].uploadFiles[this.$refs[this.refName].uploadFiles.length - 1].raw = modelView;
                    this.$refs[this.refName].uploadFiles[this.$refs[this.refName].uploadFiles.length - 1].size = modelView.size;
                    this.logoPicture = data;
                    this.cropperViews = false;

                    if (this.logoPicture != '') {
                        this.imgUpload('upload');
                    }
                })
            }
        },
        imgUpload(refName) {
            // 获取最后一张图片，避免上传多张图片
            let fileList = this.$refs[refName].uploadFiles;

            if (fileList.length > 1) {
                this.$refs[refName].uploadFiles = [];
                this.$refs[refName].uploadFiles.push(fileList[fileList.length - 1])
            }

            this.$refs[refName].submit();
        },
        logoUpSuccess(response, file, fileList) {
            // response.data =  response.data.data;
            // 把本地图片地址换成服务器图片地址
            this.$refs.upload.uploadFiles = [];
            this.logoPicture = this.BASE_URL + response.data.file_path;
            this.logo_url = response.data.file_path;
            this.retryTimes = 100;
            // this.$message({ message: response.msg, type: 'success' });
        },
        logoUpError(err, file, fileList) {
            var mess = eval('(' + err + ')');

            if (parseInt(mess.error) === 401 && this.retryTimes > 0) {
                let callbcak = (data => {
                    this.retryTimes--;
                    this.$refs.upload.submit(file);
                })
                this.get_access_token(callbcak);
            } else {
                this.$message.error(mess.msg);
            }
        },
    },
}
</script>
<style lang="scss">
.zh-browser-setting {
    >p {
        margin: 0;
        padding: 0;
        font-size: 19px;
        font-weight: bold;
    }
    >p:before {
        content: '|';
        padding-right: 5px;
    }
    .img-tip {
        margin-top: 15px;
        color: #409EFF;
        span {
            padding-right: 5px;
            vertical-align: sub;
            color: red;
        }
    }
    .el-upload--picture-card {
        width: 98px;
        height: 98px;
        >div {
            width: 100%;
            height: 100%;
            line-height: 98px;
            .cover-box {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                .uploader-close-box {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 99;
                    overflow: hidden;
                    >img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                    .el-upload-list__item-status-label {
                        display: block;
                        position: absolute;
                        right: -17px;
                        top: -7px;
                        width: 46px;
                        height: 26px;
                        background: #13ce66;
                        text-align: center;
                        transform: rotate(45deg);
                        box-shadow: 0 1px 1px #ccc;
                        .el-icon-check {
                            position: absolute;
                            left: 17px;
                            font-size: 12px;
                            margin-top: 12px;
                            color: #fff;
                            transform: rotate(-45deg);
                            font-family: 'element-icons' !important;
                            speak: none;
                            font-style: normal;
                            font-weight: normal;
                            font-variant: normal;
                            text-transform: none;
                            line-height: 1;
                            vertical-align: baseline;
                            display: inline-block;
                            -webkit-font-smoothing: antialiased;
                        }
                        .el-icon-check:before {
                            content: "\E6DA";
                        }
                        .el-icon-close {
                            display: none;
                        }
                    }
                }
                .uploader-close-box:hover {
                    background: rgba(0, 0, 0, .3);
                    .el-upload-list__item-status-label {
                        top: -4px;
                        right: -15px;
                        background: #f56c6c;
                        box-shadow: none;
                        cursor: pointer;
                        .el-icon-check {
                            display: none;
                        }
                        .el-icon-close {
                            position: absolute;
                            transform: rotate(-45deg);
                            top: 10px;
                            color: #fff;
                            right: 16px;
                            font-size: 12px;
                            font-family: 'element-icons' !important;
                            speak: none;
                            font-style: normal;
                            font-weight: normal;
                            font-variant: normal;
                            text-transform: none;
                            line-height: 1;
                            vertical-align: baseline;
                            display: inline-block;
                            -webkit-font-smoothing: antialiased;
                        }
                        .el-icon-close:before {
                            content: "\E6DB";
                        }
                    }
                }
            }
        }
        .el-icon-upload {
            font-size: 50px;
            vertical-align: middle;
            color: #9cd1ff;
        }
    }
    .croppering {
        .cropper {
            height: 500px;
            >div {
                height: 100%;
            }
        }
        .dialog-footer {
            padding: 35px 0;
            text-align: center;
            button {
                padding: 10px 30px;
            }
        }
        .vue-cropper {
            position: relative;
            width: 100%;
            height: 500px;
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            direction: ltr;
            touch-action: none;
            text-align: left;
            background-image: url("");
        }
        .cropper-box,
        .cropper-box-canvas,
        .cropper-drag-box,
        .cropper-crop-box,
        .cropper-face {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            user-select: none;
        }
        .cropper-box-canvas img {
            position: relative;
            text-align: left;
            user-select: none;
            transform: none;
            max-width: none;
            max-height: none;
        }
        .cropper-box {
            overflow: hidden;
        }
        .cropper-move {
            cursor: move;
        }
        .cropper-crop {
            cursor: crosshair;
        }
        .cropper-modal {
            background: rgba(0, 0, 0, 0.5);
        }
        .cropper-view-box {
            display: block;
            overflow: hidden;
            width: 100%;
            height: 100%;
            outline: 1px solid #39f;
            outline-color: rgba(51, 153, 255, 0.75);
            user-select: none;
        }
        .cropper-view-box img {
            user-select: none;
            text-align: left;
            max-width: none;
            max-height: none;
        }
        .cropper-face {
            top: 0;
            left: 0;
            background-color: #fff;
            opacity: 0.1;
        }
        .crop-info {
            position: absolute;
            left: 0px;
            min-width: 65px;
            text-align: center;
            color: white;
            line-height: 20px;
            background-color: rgba(0, 0, 0, 0.8);
            font-size: 12px;
        }
        .crop-line {
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            opacity: 0.1;
        }
        .line-w {
            top: -3px;
            left: 0;
            height: 5px;
            cursor: n-resize;
        }
        .line-a {
            top: 0;
            left: -3px;
            width: 5px;
            cursor: w-resize;
        }
        .line-s {
            bottom: -3px;
            left: 0;
            height: 5px;
            cursor: s-resize;
        }
        .line-d {
            top: 0;
            right: -3px;
            width: 5px;
            cursor: e-resize;
        }
        .crop-point {
            position: absolute;
            width: 8px;
            height: 8px;
            opacity: 0.75;
            background-color: #39f;
            border-radius: 100%;
        }
        .point1 {
            top: -4px;
            left: -4px;
            cursor: nw-resize;
        }
        .point2 {
            top: -5px;
            left: 50%;
            margin-left: -3px;
            cursor: n-resize;
        }
        .point3 {
            top: -4px;
            right: -4px;
            cursor: ne-resize;
        }
        .point4 {
            top: 50%;
            left: -4px;
            margin-top: -3px;
            cursor: w-resize;
        }
        .point5 {
            top: 50%;
            right: -4px;
            margin-top: -3px;
            cursor: e-resize;
        }
        .point6 {
            bottom: -5px;
            left: -4px;
            cursor: sw-resize;
        }
        .point7 {
            bottom: -5px;
            left: 50%;
            margin-left: -3px;
            cursor: s-resize;
        }
        .point8 {
            bottom: -5px;
            right: -4px;
            cursor: se-resize;
        }
    }
}
</style>
